﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="css/one.css" rel="stylesheet" type="text/css" />
    <script src="script/jquery-1.6.2.min.js" type="text/javascript"></script>
</head>
<body>
        <div class="image_container" id="img_cont"">            
            <ul class="toolbar transparent" id="tlbar" style="display:none;">
                <li><a class="zoomin"></a></li>
                <li><a class="zoomout"></a></li>
                <li><a class="shop"></a></li>
                <li><a class="fav"></a></li>
                <li><a class="edit"></a></li>
                <li><a class="label"></a></li>
                <li><a class="info"></a></li>
            </ul>
            <img src="example.jpg" alt="example" width="500" height="375"/> 
            <div class="navigation transparent" id="nav" style="display:none;">
                <a class="previous"></a>
                <a class="next"></a>
                <span class="price">$0.99</span>
            </div>
        </div>

        <script type="text/javascript">
            $(function () {
                $('#img_cont').hover(
                function () {
                    $('#tlbar').slideDown(200);
                    $('#nav').slideDown(200);
                },
                function () {
                    $('#tlbar').slideUp(200);
                    $('#nav').slideUp(200);
                }
            );
                $('#tlbar,#nav').hover(
                function () {
                    $(this).removeClass('transparent');
                },
                function () {
                    $(this).addClass('transparent');
                }
            );
            });
        </script>
</body>
</html>
